Considere esta pieza de código TypeScript que se basa en la biblioteca JQuery:
class Alpha { public foo() { $('.ca').click(() => {console.log(this)}); $('.cb').click(function () {console.log(this)}); } } Suponga que $('.ca') y $('.cb') se refieren a dos botones.
Después de llamar a foo en un objeto Alpha, vemos que el controlador de clics para '.ca' imprime el objeto Alpha, mientras que el controlador de clics para '.cb' imprime el botón identificado por $('.cb') .
Ambas interpretaciones diferentes de this pueden ser útiles. Pero, ¿qué hago si quiero usar ambas versiones de this dentro de un controlador? En otras palabras, quiero acceder tanto al objeto Alpha como al botón '.cb' dentro del controlador.
EDITAR
Para aclarar: debería haber enfatizado que estoy específicamente interesado en una forma de acceder al botón '.ca' en la situación en la que estoy usando la notación => .
El usuario Matt U indicó esto en su respuesta a mi pregunta.
Puede usar el objeto de event con la función de flecha para obtener el elemento (por ejemplo, el botón con la clase .cb ) que activó el evento de click , mientras que this se referirá a la clase. Como:
class Alpha { foo() { $('.cb').click(event => { console.log(this); console.log(event.target.className); } } }Ver aquí para un ejemplo de trabajo.
Por qué funciona así se puede responder con esto .
TLDR: dentro de los controladores de eventos, this es el elemento en el que se adjunta el evento. Todos los tipos de funciones (excepto las funciones de flecha), this depende de cómo se invoquen y pertenezcan al invocador. Las funciones de flecha toman this del alcance léxico de su declaración (aquí la instancia del objeto).
Puede mantener una referencia de this en otra variable y aprovechar los cierres para usarla dentro de su controlador de eventos.
class Alpha { public foo() { let context = this; $('.ca').click(function () { console.log(context); console.log(this); }); } }